<template>
  <div class="question-detail">
    <el-descriptions v-if="question" :column="2" border>
      <el-descriptions-item label="题目ID">{{ question.id || '-' }}</el-descriptions-item>
      <el-descriptions-item label="题型">{{ question.type_name || question.typeName || '-' }}</el-descriptions-item>
      <el-descriptions-item label="难度">
        <el-rate
          :value="question.difficult || 3"
          disabled
          :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
        />
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ question.create_time || question.createTime || '-' }}</el-descriptions-item>
      <el-descriptions-item label="分类" :span="2">
        <template v-if="question.categories || question.categoryNames">
          <el-tag
            v-for="(cat, index) in (question.categories ? question.categories.split(',') : question.categoryNames || [])"
            :key="index"
            size="small"
            type="info"
            class="mr-5"
          >{{ cat }}
          </el-tag>
        </template>
        <span v-else>-</span>
      </el-descriptions-item>
    </el-descriptions>

    <div class="detail-section">
      <h3 class="section-title">题目内容</h3>
<!--      <div class="editor-content-view" v-if="question.content" v-html="question.content" />-->
      <formula-renderer v-if="question.content" :html="question.content" />
      <div v-else class="empty-content">无题目内容</div>
    </div>

    <div v-if="question.options && question.options.length" class="detail-section">
      <h3 class="section-title">选项</h3>
      <div class="option-list">
        <div v-for="(option, index) in question.options" :key="index" class="option-item">
          <div class="option-code" :class="{ 'is-correct': option.is_correct || option.isCorrect }">
            {{ option.option_code || option.optionCode || String.fromCharCode(65 + index) }}.
          </div>
<!--          <div class="option-content" v-html="option.content" />-->
          <formula-renderer v-if="option.content" :html="option.content" />
        </div>
      </div>
    </div>

    <div v-if="question.answers && question.answers.length" class="detail-section">
      <h3 class="section-title">答案</h3>
      <div class="answer-list">
        <div v-for="(answer, index) in question.answers" :key="index" class="answer-item">
          <div class="answer-index">{{ index + 1 }}.</div>
<!--          <div class="answer-content" v-html="answer.content" />-->
          <formula-renderer v-if="answer.content" :html="answer.content" />
        </div>
      </div>
    </div>

    <div v-if="question.analysis" class="detail-section">
      <h3 class="section-title">解析</h3>
<!--      <div class="editor-content-view" v-html="question.analysis" />-->
      <formula-renderer v-if="question.analysis" :html="question.analysis" />
    </div>
  </div>
</template>

<script>
import FormulaRenderer from "@/components/FormulaRenderer/index.vue";

export default {
  name: 'QuestionDetail',
  components: {FormulaRenderer},
  props: {
    question: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="scss" scoped>
.question-detail {
  .detail-section {
    margin-top: 20px;

    .section-title {
      font-size: 16px;
      color: #666;
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid #eee;
    }

    .empty-content {
      color: #999;
      font-style: italic;
    }
  }

  .option-list, .answer-list {
    .option-item, .answer-item {
      display: flex;
      margin-bottom: 15px;

      .option-code {
        font-weight: bold;
        margin-right: 10px;

        &.is-correct {
          color: #67c23a;
        }
      }

      .answer-index {
        font-weight: bold;
        margin-right: 10px;
      }
    }
  }

  .editor-content-view {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 10px;
    line-height: 1.6;

    ::v-deep img {
      max-width: 100%;
    }
  }

  .mr-5 {
    margin-right: 5px;
  }
}
</style>
